<template>
  <div class="container mx-auto">

      <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
      
             <!-- pc端才会出现左侧小菜单 -->
      <SlideMenuSmall class="hidden md:block"  v-if="slideTpye == 'small'"  />
       <!-- pc web端 拉出左侧菜单 -->
       <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
 
  <div :class="pl" class="  pt-16  min-h-screen w-full"  >
     
  <!--
  This example requires Tailwind CSS v2.0+ 
  
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
<div class="p-3">
  <div>
  

    <main class=" w-full">
     

      <section aria-labelledby="products-heading" class="pt-6 pb-24">
       

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-8 gap-y-10 ">
          <!-- Filters -->
           <Userleft   />

          <!-- topics grid -->
          <div class="lg:col-span-3">
             
            <!-- Replace with your content -->
               <div class=" text-gray-300  ">  
                <h2  class="border-b border-gray-600 pb-3 text-gray-200">{{name}}</h2>
                 <div class="p-10 text-center text-gray-200" v-if="list.length==0">
                     {{showNothing?'You have nothing':'Loading...'}}
                 </div>
                 <div  v-if="list.length>0">
                       <a  class="card  border-b border-gray-600 " style="border-radius: 0;" v-for="(item,k) in list" v-bind:key="k" :href="'/topic/'+item.topic.slug"><div class="flex-row items-center space-x-4 card-body  p-4"><div>
                         <a :href="'/uid/'+item.user.uid" class="avatar" v-if="item.user.picture"><div class="rounded-full w-10 h-10 shadow" ><img  :src="item.user.picture"></div></a>
                          <a :href="'/uid/'+item.user.uid" class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-10 h-10" :style="'background-color:'+ item.user['icon:bgColor']"><span>{{item.user['icon:text']}}</span></div></a> 
                          </div> <div >
                              <h2  class="text-gray-100" v-if="item.topic && item.topic.title" v-html="item.topic.title"></h2>
                              <div lass="text-gray-400 " class="line-2" v-html="item.content"></div>
                               <p class=" text-gray-400">{{item.timestamp}}</p></div></div>
                        </a>
                  </div>
              </div> 
 
            <!-- /End replace -->
          </div>
          <!-- recommend topics grid -->
         
        </div>
      </section>
    </main>
  </div>
</div>

</div>
</div>
</template>


<script>
import Userleft from '../../components/Userleft.vue';
const timeago = require('../../lib/timeago');
export default {
  components: { Userleft },
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
 
  name: 'MylikesPage',
   data(){
    return { 
      slideTpye:'small',
      user:{},
      pl:"pl-0 md:pl-20",
      page:1,
      params:{},
      list:[],
      showNothing:false,
      name:'upvoted',
    }
  },
   async asyncData({$axios,req,store,params}) {
       //console.log("params:",params)
       let name="";
      if(params.page=="upvoted"){
          name ="My Likes";
      }
      if(params.page=="bookmarks"){
          name ="My Bookmarks";
      }
      if(params.page=="posts"){
          name ="My Posts";
      }
      return { 
          name: name,
          params
      }
   },
    async fetch({ store, params }) {
      
   },
   
    mounted(){
        this.getList(); 
   },
  methods: {
   async getList(){
    //    //console.log("params:",this.params)
        //this.$tools.showToast('Loading...', 10000)
        //  this.$axios.post("register/abort")
        if(!this.params.page){
            this.params.page = "upvoted";
        }
       let res = await  this.$axios.post('snogogo_nuxt/api/page/user',{slug:this.params.page})
    //  this.title = pathMatch;
      //this.$tools.hideToast();
      if(res.code>0){
         
           var  message=res.code==404?"Page Not Found": JSON.stringify( res.msg);
            this.$tools.alert("error",message);
             return;
      }
      if(res.data.posts && res.data.posts.length>0){
          this.list = this.list.concat(res.data.posts)
      }
      if(this.list.length==0){
        this.showNothing=true;
      }
      
       
    },
     
    // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0 md:pl-20";
        }
     }
   }
   
 
     

}
</script>
